<template>
    <layout>
        <mt-header title="作业报告">
            <a href="javascript:window.history.go(-1);" slot="left">
                <mt-button icon="back"></mt-button>
            </a>

            <mt-button slot="right"></mt-button>
        </mt-header>

        <div class="title-box">
            <div class="t-top">
                {{ currentIndex + 1 }}/{{ totalCount }}
            </div>

            <div class="t-tile">{{ current.content }}</div>
            <ul class="t-list">
                <li v-for="(item, index) in current.choiceDTOs" :class="{'active': item.id == current.choiceId, 'right': item.validate == 1}">
                    <span class="title">{{item.serialNumber}}</span>
                    <div v-html="item.content"></div>
                </li>
            </ul>

            <div class="data_detail">
                <div class="data-top">
                    <div class="daan_list">
                        <div>正确答案 {{ rightAnswers }}</div>
                        <div>你的答案 {{ option(current.choiceId)}}</div>
                    </div>
                    <div class="jiedu">
                        答案解读：<p v-html="current.answer"></p>
                    </div>
                </div>
                <!--<div class="data_foo">-->
                    <!--<div>全站正确率  30%</div>-->
                    <!--<div>难度系数 2.3</div>-->
                <!--</div>-->
            </div>

        </div>

        <div class="footer">
            <div class="btn" :class="{'active': currentIndex != 0}" @click="last">上一题</div>
            <div class="btn active" @click="next" v-show="totalCount != currentIndex + 1">下一题</div>
            <div class="btn active" @click="end" v-show="totalCount == currentIndex + 1">没有了</div>
        </div>

    </layout>
</template>
<style lang="scss">
    @import "index.scss";
</style>
<script type="text/babel">
    import { api } from 'framework/config.js';
    import Layout from "component/layout/standard";

    import Vue from 'vue'
    import Mint from 'mint-ui';
    Vue.use(Mint);

    export default {
        components: {
            Layout
        },
        data(){
            return {
                currentIndex: 0,
                current: {},
                totalCount: 0
            }
        },
        computed: {
            api(){
                return api();
            },
            rightAnswers(){
                if (this.current.choiceDTOs){
                    let options = this.current.choiceDTOs;
                    for (let i = 0; i < options.length; i++){
                        if (options[i].validate == 1){
                            return options[i].serialNumber;
                        }
                    }
                }
                return "";
            },

        },
        watch: {
            currentIndex: function(){
                this.current = this.questions[this.currentIndex];
            }
        },
        filters: {
        },
        methods: {
            last(){
                if (this.currentIndex != 0){
                    //取出上一题
                    this.currentIndex = this.currentIndex - 1;
                }
            },
            next(){
                if (this.currentIndex < this.totalCount - 1){
                    //取出下一题的数据
                    this.currentIndex = this.currentIndex + 1;
                }
            },
            end(){
                window.location.href = "/study/homework";
            },
            option(id){
                if (this.current.choiceDTOs){
                    let options = this.current.choiceDTOs;
                    for (let i = 0; i < options.length; i++){
                        if (options[i].id == id){
                            return options[i].serialNumber;
                        }
                    }
                }
            }
        },
        mounted() {
            if (this.questions && this.questions.length > 0){
                this.totalCount = this.questions.length;
                if (this.params.question){
                    this.current = this.questions[this.currentIndex];
                    for (let i = 0; i < this.totalCount; i++){
                        if (this.questions[i].id == this.params.question){
                            this.currentIndex = i;
                            this.current = this.questions[this.currentIndex];
                        }
                    }
                }else{
                    this.currentIndex = 0;
                    this.current = this.questions[this.currentIndex];
                }

            }
        }
    }
</script>

